addEventListener("load", function () {

    global.getChartData(initView);

    var tabs = document.querySelectorAll(".tab");
    var issueLists = document.querySelectorAll('.issue-list');
    var charts = document.querySelectorAll('.chart');
    var blueBox = document.querySelector(".blue-box");
    var sections = document.querySelectorAll(".main section");
    var checkedRed = document.querySelector("#checkedRed");
    var checkedBlue = document.querySelector("#checkedBlue");
    var red_checked = document.getElementsByClassName('choose-row')[0].children;
    var blue_checked = document.getElementsByClassName('choose-row')[1].children;
    var num_money = document.querySelector('.num_money');
    var betBtn = document.querySelector('.bet-btn');
    var setBtns = document.querySelectorAll(".set-btn");

    var count;
    var redChosen = [];
    var blueChosen = [];
    var redList = [];
    var blueList = [];
    var ballNumber;

    betBtn.addEventListener('click', betButtonhandle);

    function initView(data,Number) {
        ballNumber = Number;
        render(data);
        addTabChange();
        scrollHandler();
        blueBox.classList.add('chart-hide');
        for (var i = 0; i < setBtns.length; i++) {
            var setBtn = setBtns[i];
            setBtn.addEventListener("click", showSettingView);
        }

    }
    function showSettingView() {
        Modal(settingsHandler)
    }

    function settingsHandler(setObj) {
        if (setObj.sortType !== global.sortType) {
            global.sortType = setObj.sortType;
            cleanView();
            render(global.chartData.reverse());

            // scrollHandler();
        }
    }
    function cleanView() {
        for (var i = 0; i < issueLists.length; i++) {
            issueLists[i].innerHTML = "";
        }

        for (var j = 0; j < charts.length; j++) {
            charts[j].innerHTML = "";
        }
    }
    function render(data) {
        for (var x = 0; x < data.length; x++) {
            renderRow(data[x]);
        }
    }

    function renderRow(rowData) {
        for (var i = 0; i < issueLists.length; i++) {
             renderIssue(issueLists[i], rowData);
        }
        if (charts[0]) {
            renderChart(charts[0],global.red_space,rowData.Result.split('|')[0]);
        }
        if (charts[1]) {
            renderChart(charts[1],global.blue_space,rowData.Result.split('|')[1]);
        }
    }

    function renderIssue(element, data) {
        var li = document.createElement('li');
        li.innerHTML = data.Number;
        li.className = 'issue';
        element.appendChild(li);
    }

    function renderChart(element,space, data) {
        element.appendChild(createChartRow(space,data))
    }

    function scrollHandler() {
        global.scrollHandler(".red-box");
        global.scrollHandler(".blue-box");
    }


    function addTabChange() {
        //给元素编号
        for (var i = 0; i < tabs.length; i++) {
            tabs[i].index = i;
            tabs[i].addEventListener('click', function () {
                for (var i = 0; i < sections.length; i++) {
                    sections[i].classList.add("chart-hide");
                    tabs[i].classList.remove("tab-active");
                }
                sections[this.index].classList.remove("chart-hide");
                tabs[this.index].classList.add("tab-active");
            }, false)
        }
    }

    function createChartRow(space, rowData) {
        var ballRow = document.createElement("li");
        var data = rowData.split(',');
        data = data.map(item => {
            return Number(item);
        });
        for (var i = 0; i < space.length; i++) {
            var div = document.createElement('div');
            div.className = 'ball-box';
            if (data.indexOf(i+1) != -1) {
                var win = document.createElement('div');
                win.className = 'ball-win';
                win.innerHTML = i + 1;
                div.appendChild(win)
                space[i] =0;
            } else {
                div.innerHTML = space[i];
                space[i] ++;
            }

            ballRow.appendChild(div);
        }
        ballRow.classList.add("chart-row");
        return ballRow;
    }

    //var red_checked = chooseRow.childNodes;
    var redChecked = function (selectedCode) {
        for (var i = 0; i < selectedCode.length; i++) {
            selectedCode[i].addEventListener('click', function (e) {
                if (e.target.classList.contains('active')) {
                    e.target.classList.remove("active");
                    redChosen[parseInt(e.target.innerHTML)] = 0;
                } else {
                    if (redList.length >= 18) {
                        Alert({
                            content: '红球不能超过18个',
                            time: 2000
                        });
                        return;
                    }
                    e.target.classList.add("active");
                    redChosen[parseInt(e.target.innerHTML)] = 1;
                }
                renderBallList(redChosen);
            })
        }
    };
    redChecked(red_checked);

    var blueChecked = function (selectedCode) {
        for (var i = 0; i < selectedCode.length; i++) {
            selectedCode[i].addEventListener('click', function (e) {
                if (e.target.classList.contains('active')) {
                    e.target.classList.remove("active");
                    blueChosen[parseInt(e.target.innerHTML)] = 0;
                } else {
                    e.target.classList.add("active");
                    blueChosen[parseInt(e.target.innerHTML)] = 1;
                }
                renderBallList(blueChosen);
            })
        }
    }
    blueChecked(blue_checked);

    function renderBallList() {
        checkedBlue.innerHTML = "";
        checkedRed.innerHTML = "";
        redList = [];
        blueList = [];

        for (var i = 0; i < blueChosen.length; i++) {
            if (blueChosen[i] === 1) {
                blueList.push(i)
            }
        }
        for (var j = 0; j < blueList.length; j++) {
            if (blueList[j] < 10) {
                blueList[j] = '0' + parseInt(blueList[j])
            }
            var blue = blueList[j];

            var blueLi = document.createElement("li");

            blueLi.innerHTML = blue;

            checkedBlue.appendChild(blueLi);
        }


        for (var i = 0; i < redChosen.length; i++) {
            if (redChosen[i] === 1) {
                redList.push(i)
            }
        }
        for (var j = 0; j < redList.length; j++) {
            if (redList[j] < 10) {
                redList[j] = '0' + parseInt(redList[j])
            }
            var red = redList[j];
            var redLi = document.createElement("li");

            redLi.innerHTML = red;

            checkedRed.appendChild(redLi);
        }

        /**
         *阶乘
         */
        function factorial(num) {
            return num > 1 ? num * factorial(num - 1) : 1;
        }

        /**
         *大乐透注数算法
         */
        function dltrednumberofbet(numred, numblue) {
            return (factorial(numred) / (factorial(numred - 5) * factorial(5))) * (factorial(numblue) / (factorial(numblue - 2) * factorial(2)));
        }

        count = dltrednumberofbet(redList.length, blueList.length);
        if (redList.length >= 5 && blueList.length >= 2) {
            num_money.innerHTML = redList.length + "个红球" + blueList.length + "个蓝球,共" + count * 2 + "元";
        } else {
            num_money.innerHTML = "至少选5个红球和2个蓝球";
        }

    }

    function clearView() {
        redList = [];
        blueList = [];
        redChosen = [];
        blueChosen = [];

        checkedBlue.innerHTML = "";
        checkedRed.innerHTML = "";
        num_money.innerHTML = "至少选5个红球和2个蓝球";

        var red_checked = document.getElementsByClassName('choose-row')[0].children;
        var blue_checked = document.getElementsByClassName('choose-row')[1].children;

        for (var i = 0; i < blue_checked.length; i++) {
            blue_checked[i].querySelector("div").classList.remove("active")
        }
        for (var j = 0; j < red_checked.length; j++) {
            red_checked[j].querySelector("div").classList.remove("active")
        }
    }


    function betButtonhandle() {
        if (!global.btnable) {
            return
        }

        if (count * 2 > 20000) {
            Alert({
                content: '投注金额不能大于2万元',
                time: 2000
            });
            return;
        }

        if (redList.length < 5 || blueList.length < 2) {
            Alert({
                content: '至少选5个红球和2个蓝球',
                time: 2000
            });
            return;
        }

        num_money.innerHTML = redList.length + "个红球" + blueList.length + "个蓝球,共" + count * 2 + "元";

        var redVal = redList.join(',');
        var blueVal = blueList.join(',');

        var betObj = {
            Model: Model,
            Number:ballNumber,
            betCode: redVal + '|' + blueVal,
            count: count,
            money: count * 2
        };

        clearView();
        global.bet(betObj);
    }


});
